<script setup lang="ts">
import {onUpdated, ref} from "vue";
import {Result} from "@/type.ts";
interface Props{
  data?:Result
}
const props =defineProps<Props>()
onUpdated(()=>{

  searchResult.value =props.data
})
const searchResult = ref<Result>({
  name: "",
  operatorRecord: undefined,
  operatorStatus: "",
  product: undefined,
  productNo: "",
  refundRecord: undefined,
  refundStatus: ""
})
</script>

<template>
  <el-card >
    <div style="height: calc(100vh - 235px);">
      <div v-if="searchResult.productNo===null || searchResult.productNo===''">
        <div class="entity_box">
          <el-image style="width: 150px; height: 150px" src="/entity.png" alt="没有查询到订单信息"/>
          没想查询到相关信息
        </div>

      </div>
      <div v-else>
        <div class="info_box">
          <div class="info_title">

            <div>
              商品名称: {{ searchResult.name }}
            </div>
            <div>
              商品单号: {{ searchResult.productNo }}
            </div>
          </div>
        </div>
        <div class="info">
          <!--          订单信息-->
          <div class="product_info" v-if="searchResult.product">
            <div class="title">订单信息</div>
            <table class="custom_table">
              <thead>
              <tr class="custom_tr">
                <th>订单价格</th>
                <th>支付方式</th>
                <th>支付时间</th>
                <th>联系电话</th>
                <th>派单状态</th>
                <th>退款状态</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>{{ searchResult.product.productTotal }}</td>
                <td>{{ searchResult.product.productPay }}</td>
                <td>{{ searchResult.product. productTime}}</td>
                <td>{{ searchResult.product.productInfo }}</td>
                <td>{{ searchResult.operatorStatus }}</td>
                <td>{{ searchResult.refundStatus }}</td>
              </tr>
              </tbody>
            </table>
          </div>

          <!--          派单信息-->
          <div class="operator_info" v-if="searchResult.operatorRecord">
            <div class="title">派单信息</div>
            <table class="custom_table">
              <thead>
              <tr class="custom_tr">
                <th>客户昵称</th>
                <th>客户来源</th>
                <th>派单金额</th>
                <th>做单时间</th>
                <th>接待客服</th>
                <th>接单师傅</th>
                <th>完成状态</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>{{ searchResult.operatorRecord.nickname }}</td>
                <td>{{ searchResult.operatorRecord.chatSource }}</td>
                <td>{{ searchResult.operatorRecord.productPrice }}</td>
                <td>{{ searchResult.operatorRecord.operatorTime}}</td>
                <td>{{ searchResult.operatorRecord.receiveName }}</td>
                <td>{{ searchResult.operatorRecord.operatorName }}</td>
                <td>{{ searchResult.operatorRecord.status }}</td>
              </tr>
              </tbody>
            </table>
          </div>
          <!--          退款信息-->
          <div class="refund_info" v-if="searchResult.refundRecord">
            <div class="title">退款信息</div>
            <table class="custom_table">
              <thead>
              <tr class="custom_tr">
                <th>客户渠道</th>
                <th>客户来源</th>
                <th>责任人</th>
                <th>操作人</th>
                <th>订单金额</th>
                <th>退款金额</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>{{ searchResult.refundRecord.paymentSource }}</td>
                <td>{{ searchResult.refundRecord.chatSource }}</td>
                <td>{{ searchResult.refundRecord.dutyName }}</td>
                <td>{{ searchResult.refundRecord.refundName }}</td>
                <td>{{ searchResult.refundRecord.productPrice }}</td>
                <td>{{ searchResult.refundRecord.refundPrice }}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>


  </el-card>
</template>

<style scoped>





.entity_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.info_title {
  width: 100%;
  display: flex;
  font-size: 20px;
  font-weight: bold;
  flex-direction: row;
  justify-content: space-between;


}

@media (max-width: 810px ) {
  .info_title {
    text-align: start;
    flex-direction: column;
  }
}

.custom_table {
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
  line-height: 30px;
}

.custom_tr th, td {
  border: 1px solid black;

}

.title {
  width: 100%;
  text-align: start;
  font-size: 20px;
  margin-top: 8px;
  margin-bottom: 4px;
}
</style>